<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="style/common.css"/>
    <link rel="stylesheet" href="style/cart.css"/>
</head>
<body>

<!--start-->
<div class="techbook cart">
    <!--head-->
    <div class="head head_cart">
        <div class="top">
            <div class="wrap">
                <div class="fl">51TechBook.com，为技术而生！</div>
                <div class="fr">
                    <p class="fl">Hi，<a href="" class="username">张三</a><a href="" class="logout">[退出]</a></p>

                    <div class="fr topMenu">
                        <dl>
                            <dt>
                                <a href="">我的订单</a>
                            </dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">个人中心</a>
                            </dt>
                            <dd>
                                <a href="">个人信息</a><a href="">安全中心</a><a href="">收货地址</a><a href="">等待添加</a>
                            </dd>
                        </dl>
                        <dl class="cart">
                            <dt><a href="">购物车<i>16</i></a></dt>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">我是商家</a>
                            </dt>
                            <dd>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                                <a href="">我是商家</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">客户服务</a>
                            </dt>
                            <dd>
                                <a href="">消费服务</a>
                                <a href="">商家服务</a>
                            </dd>
                        </dl>
                        <dl class="more">
                            <dt>
                                <a href="">更多</a>
                            </dt>
                            <dd>
                                <a href="">更多</a>
                                <a href="">更多</a>
                                <a href="">更多</a>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>


        <div class="bot">
            <div class="wrap">
                <div class="left fl">
                    <a href="" class="logo"><img src="img/front/about_logo.jpg" alt=""></a>
                </div>
                <div class="cart_step step_1 fr">
                    <span>购物车</span><span>确认订单</span><span>支付完成</span>
                </div>
            </div>
        </div>

    </div>
    <!--head End-->

    <!--body-->
    <div class="body">
        <div class="wrap">

            <div class="cartList" id="cartList">

                <ul class="top">
                    <li class="chk"><input type="checkbox" class="chkAll"></li>
                    <li class="all">全选</li>
                    <li class="info">商品信息</li>
                    <li class="price">单价（元）</li>
                    <li class="qty">数量</li>
                    <li class="total">金额（元）</li>
                    <li class="opt">操作</li>
                </ul>

                <dl class="shop">
                    <dt>
                        <input type="checkbox" class="chkShop">
                    <h3>智慧图书专营店</h3>
                    </dt>
                    <dd>
                        <dl class="goods">
                            <dd>
                                <input type="checkbox" name="" class="chk chkIpt">
                                <div class="imgBox">
                                    <div class="img"><a href=""><img src="img/example/book_99x99.jpg" alt=""></a></div>
                                </div>
                                <div class="name"><a href="">智慧图书专营店，智慧图书专营店，智慧图书专营店，智慧图书专营店。</a></div>
                                <div class="price" data-price="10"><span>￥10.00</span><p>手机购买价格更低</p></div>
                                <div class="qty">
                                    <div class="qtyBtns" data-limit="5">
                                        <input type="button" value="-" class="cut">
                                        <input type="text" value="3" class="ipt iptQty">
                                        <input type="button" value="+" class="add">
                                    </div>
                                    <p>限购1000件</p>
                                </div>
                                <div class="total">￥<span data-total="30">30.0</span></div>
                                <div class="opt">
                                    <p>移入收藏</p>
                                    <p class="del">删除</p>
                                </div>
                            </dd>
                            <dd>
                                <input type="checkbox" name="" class="chk chkIpt">
                                <div class="imgBox">
                                    <div class="img"><a href=""><img src="img/example/book_99x99.jpg" alt=""></a></div>
                                </div>
                                <div class="name"><a href="">智慧图书专营店，智慧图书专营店，智慧图书专营店，智慧图书专营店。</a></div>
                                <div class="price" data-price="10"><span>￥10.00</span><p>手机购买价格更低</p></div>
                                <div class="qty" data-limit="5">
                                    <div class="qtyBtns" data-limit="5">
                                        <input type="button" value="-" class="cut">
                                        <input type="text" value="3" class="ipt iptQty">
                                        <input type="button" value="+" class="add">
                                    </div>
                                    <p>限购1000件</p>
                                </div>
                                <div class="total">￥<span data-total="30">30.0</span></div>
                                <div class="opt">
                                    <p>移入收藏</p>
                                    <p class="del">删除</p>
                                </div>
                            </dd>
                            <dt>
                                <b>店铺合计：</b>
                                <strong>￥0.00</strong>
                            </dt>
                        </dl>
                    </dd>


                </dl>
                <dl class="shop">
                    <dt>
                        <input type="checkbox" class="chkShop">
                    <h3>智慧图书专营店</h3>
                    </dt>
                    <dd>
                        <dl class="goods">
                            <dd>
                                <input type="checkbox" name="" class="chk chkIpt">
                                <div class="imgBox">
                                    <div class="img"><a href=""><img src="img/example/book_99x99.jpg" alt=""></a></div>
                                </div>
                                <div class="name"><a href="">智慧图书专营店，智慧图书专营店，智慧图书专营店，智慧图书专营店。</a></div>
                                <div class="price" data-price="10"><span>￥10.00</span><p>手机购买价格更低</p></div>
                                <div class="qty">
                                    <div class="qtyBtns" data-limit="5">
                                        <input type="button" value="-" class="cut">
                                        <input type="text" value="3" class="ipt iptQty">
                                        <input type="button" value="+" class="add">
                                    </div>
                                    <p>限购1000件</p>
                                </div>
                                <div class="total">￥<span data-total="30">30.0</span></div>
                                <div class="opt">
                                    <p>移入收藏</p>
                                    <p class="del">删除</p>
                                </div>
                            </dd>
                            <dt>
                                <b>店铺合计：</b>
                                <strong>￥0.00</strong>
                            </dt>
                        </dl>
                    </dd>

                </dl>

                <div class="bot">
                    <ul class="fl">
                        <li class="chk"><input type="checkbox" class="chkAll"></li>
                        <li class="all">全选</li>
                        <li class="del"><span>批量删除</span></li>
                        <li class="qty">已选择<b>2</b>件商品</li>
                    </ul>
                    <ul class="fr">
                        <li class="tip"><p>总计（不含运费）</p><em>已节省：￥30.00</em></li>
                        <li class="total">￥0.00</li>
                        <li class="buy"><button>结&nbsp;算</button></li>
                    </ul>
                </div>

            </div>

        </div>
    </div>
    <!--body End-->

    <!--foot-->
    <div class="foot">
        <div class="copyright">
            <p class="wrap">Copyright&nbsp;&copy;&nbsp;2013-2018&nbsp;武汉创远达信息技术有限公司版权所有&emsp;鄂ICP备14008188-1号</p>
        </div>
    </div>
    <!--foot End-->

</div>
<!--End-->

</body>
<script src="script/jquery.js"></script>
<script src="script/plug.js"></script>
<script src="script/common.js"></script>
<script>
$(function(){
    //Tab
    $('.tab').tab();

    //全选/取消全选
    ;(function(){
        var $list=$('#cartList'),$chkAll=$list.find('.chkAll'),$chkShop=$list.find('.chkShop'),$chkIpt=$list.find('.chkIpt'),$all=$chkAll.add($chkShop).add($chkIpt);

        //列表
        $chkAll.on('click', function () {
            $all.prop('checked',$(this).prop('checked'));
        });

        //店铺
        $chkShop.on('click', function () {
            var chked=$(this).prop('checked');
            console.log(chked,$(this).closest('.shop').find('.chkIpt'));
            $(this).closest('.shop').find('.chkIpt').prop('checked',chked);

            var chkedAll=true;
            $.each($chkShop, function (i, chk) {
                if(!$(chk).prop('checked'))chkedAll=false;
            });
            $chkAll.prop('checked',chkedAll);
        });

        //商品
        $chkIpt.on('click', function () {
            var chkedShop=true;
            //冒泡到店铺
            $.each($(this).closest('.goods').find('.chkIpt'), function (i, chk) {
                if(!$(chk).prop('checked'))chkedShop=false;
            });
            $(this).closest('.shop').find('dt>.chkShop').prop('checked',chkedShop);

            //冒泡到列表
            var chkedAll=true;
            $.each($chkShop, function (i, shop) {
                if(!$(shop).prop('checked'))chkedAll=false;
            });
            $chkAll.prop('checked',chkedAll);
        });

    })();



    //数量
    ;(function(){
        var $list=$('#cartList');
        var validate= function (val) {
            return /$\d+^/.test(val);
        };

        $('.qtyBtns').on('keyup','.iptQty', function (e) {
            var val=$(this).val(),limit=parseInt($(this).closest('.qtyBtns').attr('data-limit'));
            if(!validate(val)){
                val=val.replace(/\D/g,'').trim();
                if(''==val){
                    val=1;
                }else{
                    if(val>limit){
                        val=limit;
                    }
                }
                $(this).val(val);
            }else{
                if(parseInt(val)>limit){
                    $(this).val(limit);
                }
            }
        });

        //--Cut
        $list.on('click','.cut', function () {
            var val=$(this).next('.iptQty').val(),total,$dd;
            if(!validate(val))return;
            val--;
            if(~val){
                $(this).next('.iptQty').val(val);
                $dd=$(this).closest('dd');
                total=$dd.find('[data-price]').attr('data-price')*val;
                $dd.find('[data-total]').text(total.toFixed(2));
            }
        });
        //--Add
        $list.on('click','.add', function () {
            var val=$(this).prev('.iptQty').val(),total,limit,$dd;
            if(!validate(val))return;
            val++;
            limit=$(this).parent().attr('data-limit');
            if(val<=limit){
                $(this).prev('.iptQty').val(val);
                $dd=$(this).closest('dd');
                total=$dd.find('[data-price]').attr('data-price')*val;
                $dd.find('[data-total]').text(total.toFixed(2));
            }
        });

    })();

    //删除
    ;(function () {
        $('.goods').on('click','.del', function () {
            console.log($(this))
            $(this).closest('dd').slideUp();
        });
    })();

});
</script>
</html>